/* COMMON DEMO STYLE */
.page-view { width: 100%; height: 750px; position: relative; z-index: 1;}
.page-view .project { position: absolute; width: 100%; height: 750px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.page-view .project:nth-child(1) { z-index: 30; }

.page-view .arrows .arrow { position: absolute; top: 50%; z-index: 100; }
.page-view .arrows .arrow.previous{ left:10%;}
.page-view .arrows .arrow.next { -webkit-transform: rotate(180deg); transform: rotate(180deg); right:10%;}
.page-view .arrows .arrow:hover.previous { -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); }
.page-view .arrows .arrow:hover.next { -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(5px, 0, 0) rotate(180deg); transform: translate3d(5px, 0, 0) rotate(180deg); }

.page-view .arrows .arrow svg { height: 40px; width: 25px; padding: 2px; }
.page-view .arrows .arrow svg polygon { fill: #000; opacity:0.6; }
.page-view .arrows .arrow { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53); transition: transform 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53); margin-right: 10px; margin-top: -7px; }

 @-webkit-keyframes mask-play {  from {
 -webkit-mask-position: 0% 0;
 mask-position: 0% 0;
}
to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
 @keyframes mask-play {  from {
 -webkit-mask-position: 0% 0;
 mask-position: 0% 0;
}
to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}



.demo-2{ height: 750px;}
.demo-2 .page-view { background: url(../images/building-sprite-2.png) no-repeat -9999px -9999px; }
.demo-2 .page-view .project:nth-child(odd).hide { -webkit-mask: url(../images/building-sprite.png); mask: url(../images/building-sprite.png); -webkit-mask-size: 7500% 100%; mask-size: 7500% 100%; -webkit-animation: mask-play 1.4s steps(74) forwards; animation: mask-play 1.4s steps(74) forwards; }
.demo-2 .page-view .project:nth-child(even).hide { -webkit-mask: url(../images/building-sprite-2.png); mask: url(../images/building-sprite-2.png); -webkit-mask-size: 8400% 100%; mask-size: 8400% 100%; -webkit-animation: mask-play 1.4s steps(83) forwards; animation: mask-play 1.4s steps(83) forwards; }
/* Fallback */
.no-cssmask .page-view .project.hide { opacity: 0; -webkit-transition: opacity 1.4s ease; transition: opacity 1.4s ease; -webkit-mask: none !important; mask: none !important; }